<template>
  <div>
    <sys-dialog
      :title="addDialog.title"
      :width="addDialog.width"
      :visible="addDialog.visible"
      @onClose="onClose"
      @onConfirm="onConfirm">
      <div slot="content">
        <el-form
          :model="addDeptModel"
          ref="addDeptForm"
          :rules="rules"
          label-width="80px"
          :inline="true"
          size="small">
          <el-form-item prop="parentName" label="上级部门">
            <el-input
              @click.native="selectDept()"
              v-model="addDeptModel.parentName"></el-input>
          </el-form-item>
          <el-form-item prop="name" label="部门名称">
            <el-input v-model="addDeptModel.name"></el-input>
          </el-form-item>
          <el-form-item label="部门编码">
            <el-input v-model="addDeptModel.deptCode"></el-input>
          </el-form-item>
          <el-form-item label="部门电话">
            <el-input v-model="addDeptModel.deptPhone"></el-input>
          </el-form-item>
          <el-form-item label="部门经理">
            <el-input v-model="addDeptModel.manager"></el-input>
          </el-form-item>
          <el-form-item label="部门地址">
            <el-input v-model="addDeptModel.deptAddress"></el-input>
          </el-form-item>
          <el-form-item label="部门序号">
            <el-input v-model="addDeptModel.orderNum"></el-input>
          </el-form-item>
        </el-form>
      </div>
    </sys-dialog>
    <!-- 注意这个不能放在element-ui的组件内部，放进去会报错 -->
    <Parent ref="parentRef" @NodeClick="NodeClick"></Parent>
  </div>
</template>

<script>
import SysDialog from '@/components/system/SysDialog'
import Parent from './parent.vue'
export default {
  name: 'deptDialog',
  components: {
    SysDialog,
    Parent
  },
  data() {
    return {
      // 新增部门表单数据
      addDeptModel: {
        editType: '',
        id: '',
        pid: '',
        parentName: '',
        manager: '',
        deptAddress: '',
        deptPhone: '',
        name: '',
        deptCode: '',
        orderNum: ''
      },
      // 存储新增对话框的属性
      addDialog: {
        title: '',
        width: 620,
        height: 250,
        visible: false
      },
      // 表单验证规则
      rules: {
        parentName: [
          {
            required: true,
            trigger: 'change',
            message: '请选择上级部门'
          }
        ],
        name: [
          {
            required: true,
            trigger: 'change',
            message: '请填写部门名称'
          }
        ]
      }
    }
  },
  methods: {
    // 定义一个show方法，在页面打开的时候，接收传递的参数
    // 控制页面的展示效果
    // 父组件只用触发这个参数就可以了
    show(type, row) {
      // console.log(type)
      // console.log(row)
      // 首先要清空表单
      this.$resetForm('addDeptForm', this.addDeptModel)
      // 添加标题
      if (type === '0') {
        this.addDialog.title = '新增部门'
      } else if (type === '1') {
        this.addDialog.title = '编辑部门'
        this.$objCoppy(row, this.addDeptModel)
      }
      // 显示弹框
      this.addDialog.visible = true
      // 设置此次编辑的属性
      this.addDeptModel.editType = type
    },
    onClose() {
      console.log('关闭')
      // this.$emit('onClose')
      this.addDialog.visible = false
    },
    onConfirm() {
      console.log('确认')
      this.$refs.addDeptForm.validate((vaild) => {
        if (vaild) {
          this.$emit('onConfirm', this.addDeptModel)
          this.addDialog.visible = false
        }
      })
    },
    selectDept() {
      console.log('点击选择父级菜单')
      console.log(this.$refs.parentRef)
      this.$refs.parentRef.show()
    },
    // 点击了选择父级组织
    NodeClick(data) {
      this.addDeptModel.pid = data.id
      this.addDeptModel.parentName = data.name
    }
  }
}
</script>

<style lang="less" scoped></style>
